<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext/resources/css/ext-all.css"/>

    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/adapter/ext/ext-base.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-all.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-lang-es.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/plugins/searchfield.js"; ?>"></script>
    <script type="text/javascript">
    var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
    var BASE_PATH = '<?php echo base_url(); ?>';
    var BASE_ICONS = BASE_PATH + 'assets/icons/';
    Ext.onReady(function() {
      

        var strUsers = new Ext.data.Store({
            reader: new Ext.data.JsonReader({
                fields: [
                    'idCliente', 'razon_social', 'nombre_fantasia', 'rut'
                ],
                root: 'rows', totalProperty: 'results'
            }),
            proxy: new Ext.data.HttpProxy({
                url: BASE_URL + 'cliente/clienteSelect',
                method: 'POST'
            })
        });

        var searchUsers = new Ext.app.SearchField({
            store: strUsers,
            params: {start: 0, limit: 10},
            width: 180,
            id: 'fieldUsersSearch'
        });

        var tbUsers = new Ext.Toolbar({
            items:[{
                text: 'Eliminar cliente',
                icon: BASE_ICONS + 'cliente_delete.png',
                handler: deleteUsers
            }, '->', searchUsers]
        });

        function deleteUsers() {
            Ext.Msg.show({
                title: 'Confirmar',
                msg: '¿ Seguro que desea eliminar ?',
                buttons: Ext.Msg.YESNO,
                fn: function(btn) {
                    if (btn == 'yes') {
                        var sm = gridUsers.getSelectionModel();
                        var sel = sm.getSelections();
                        var data = '';
                        for (i = 0; i<sel.length; i++) {
                            data = data + sel[i].get('idCliente') + ';';
                        }
                        Ext.Ajax.request({
                            url: BASE_URL + 'cliente/clienteDelete',
                            method: 'POST',
                            params: { postdata: data }
                        });
                        strUsers.load();
                    }
                }
            });
        }

        var cbGrid = new Ext.grid.CheckboxSelectionModel();

        var gridUsers = new Ext.grid.EditorGridPanel({
            frame: true, 
            title: 'Cliente',
            border: true, 
            stripeRows: true,
            sm: cbGrid,
            store: strUsers, 
            //title: '',
            style: 'margin:0 auto;', height: 570, width: 1130,
            columns: [ 
                      cbGrid, {
                    header: "Rut",
                    dataIndex: 'rut',
                    sortable: true,
                    width: 85
                }, {
                    header: "Nombre fantas&iacute;a",
                    dataIndex: 'nombre_fantasia',
                    sortable: true,
                    width: 200
                },{
                    header: "Raz&oacute;n social",
                    dataIndex: 'razon_social',
                    sortable: true,
                    width: 200
                }
                      
            ],
            tbar: tbUsers,
            bbar: new Ext.PagingToolbar({
                pageSize: 20,
                store: strUsers,
                displayInfo: true
            })
        });

        gridUsers.render('divgrid');
        strUsers.load();
    });
    </script>
    <style type="text/css">
        #divgrid {
            background: #e9e9e9;
            border: 1px solid #d3d3d3;
        }
    </style>

    <title></title>
</head>
<body>
    <div id="divgrid"></div>
</body>
</html>